<template>
    <div class="card">
        <div class="title">
        <h4 class="normal">   
            <img class="title_icon" src="../../assets/title.png" alt />
            &nbsp;红外布撤防
        </h4>
        </div>
        <div class="table_wrap" >
            <div class="infraredenable">
                <span :class="infraredenable ? '':'fangshi'">一键撤防</span>
                <el-switch
                    v-model="infraredenable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="infraredenableSwitch"
                    class="infraredenable_switch">
                </el-switch>
                <span :class="infraredenable ? 'fangshi':''">一键布防</span>
            </div>
            <div class="infraredenable_sh">
                <div  class="infraredenable_nr" v-for="(item,index) in infraredData.infraredlist" :key="index">
                        <span>{{item.idname}}/{{item.name}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'cardData', 'nowId'],
    data () {
        return{
            timer1: '',
            clickGetData:'',//延迟保存计时器
            clickNumber:0,//延迟保存点击次
            infraredenable:true,
            infraredData:{
                "infraredenable": true,
                "infraredlist": []
            }
        }
    },
    created(){
        this.parseData()
        this.$nextTick(() => {
             this.timer1 = setInterval(() => {
                setTimeout(this.parseData(), 0);
            }, 3000); 
        })
    },
    computed: {
    },
    methods: {
        parseData(){
            this.infraredData = JSON.parse(localStorage.getItem("红外布撤防数据")) //特殊卡片缓存数据真实状态刷新慢，接口3秒读一次数据
            if(this.clickNumber == 0){  // 延迟判断状态中不接受真实状态
                this.infraredenable = this.infraredData.infraredenable
            }
        },
        //红外开关
        infraredenableSwitch(data){
            // 延迟保存方法-------------------------
            this.clickNumber = 1
            clearInterval(this.clickGetData);
            this.clickGetData = null;
            this.clickGetData = setInterval(() => {
                console.log(this.clickNumber)
                this.clickNumber++;
                if(this.infraredData.infraredenable == !data){ // 返回的值和下发值不一致，等待返回 (套用方法只修改这里的判断对比值就可以)
                    this.infraredenable = data
                }else{ // 返回的值和下发值一致，取消等待，拿取真实值
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                }
                if(this.clickNumbe >= this.$store.state.waittTime){ //等待5秒后，取消等待，拿取真实值 waittTime统一宏变量
                    clearInterval(this.clickGetData);
                    this.clickGetData = null;
                    this.clickNumber = 0
                }
            }, 1000); 
            // ----------------------------------
            var params = {
                'setinfraredenable':data,
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl,params).then((res)=>{
                if(res.data.result == 'ok' ){
                }else if(res.data.result == 'No access rights'){
                    this.$message({
                        message: '请登录后操作',
                        type: 'warning',
                        duration: 1500
                    });
                }
            })
        },
    },
     // 清除定时器
    beforeDestroy() {
        clearInterval(this.timer1);
        this.timer1 = null;
        clearInterval(this.clickGetData);
        this.clickGetData = null;
    },
}
</script>

<style scoped>
    .infraredenable{
        width: 80%;
        text-align: center;
        height: 70px;
        line-height: 70px;
        position: relative;
        margin: 0 auto;
        margin-top: 10px;
        box-shadow: 0px 0px 0px #fff;
        background: linear-gradient(to bottom , rgba(255, 0, 0, 0), #0168b7 300%);
    }
    .infraredenable::after,
    .infraredenable::before {
        width: 20px;
        height: 20px;
        content: "";
        position: absolute;
        transition: all 0.8s ease;
    }

    .infraredenable::before {
        /* top: -5px;
        left: -5px; */
        left: -1px;
        bottom: -2px;
        /* border-top: 1px solid #9ce0ffbd; */
        border-left: 1px solid #9ce0ffbd;
        border-bottom: 1px solid #9ce0ffbd;
    }
    .infraredenable::after {
        right: -1px;
        bottom: -2px;
        border-bottom: 1px solid #9ce0ffbd;
        border-right: 1px solid #9ce0ffbd;
    }
    .infraredenable_switch{
        margin: 0px 10px;
    }
    .fangshi{
        color: #ffb700;
    }
    .infraredenable_sh{
        width: 100%;
        margin: 0 auto;
        height: 130px;
        overflow: hidden;
        overflow-y: scroll;
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
        padding-left: 37px;
        align-items: center;
        justify-content: space-around;
    }
    .infraredenable_nr{
        width: 380px;
        height: 40px;
        margin-bottom: 15px;
        margin-right: 30px;
        background:#ffffff14;
        border-radius: 5px;
        line-height: 40px;
        padding: 0px 10px;
        text-align: center;
        overflow: hidden;
        border-left: 1px solid #38bdea;
        border-right: 1px solid #38bdea;
    }
</style>